<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Expenses-index</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="email=no,address=no,telephone=no" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
	<script type="text/javascript" src="../js/zepto.min.js"></script>
	<script type="text/javascript" src="../js/mediaFize.js"></script>
	<script type="text/javascript" src="../js/util.js"></script>
	<script type="text/javascript" src="../js/swiper-3.4.0.min.js"></script>
	<script type="text/javascript" src="../js/timer.js"></script>
	<link type="text/css" rel="stylesheet" href="../css/home.css" />
	<link type="text/css" rel="stylesheet" href="../css/swiper-3.4.0.min.css" />
	<link type="text/css" rel="stylesheet" href="css/index.css" />
	<style>
	</style>
</head>
<body>
<div id="pageSwaper">
	<div class="homepage_index_bg">
		<div class="animate">
			<div class="baseball">
				<i class="icon1"></i>
				<i class="icon2"></i>
				<span class="credits">当前已用金额<i></i></span>
			</div>
		</div>
		<nav class="nav">
			<div class="header_user">
				<ul  id="userList">

				</ul>
			</div>
		</nav>
		<!--详情-->
		<div class="detail_info">
			<p class="title">消费记录 : </p>
			<table cellpadding="0" cellspacing="0" id="detaiList">
				<colgroup span="3" style="color:blue"></colgroup>
				<tr class="header">
					<td>日期</td>
					<td>用途</td>
					<td>消费人</td>
					<td>备注</td>
					<td>金额</td>
					<td>付款人</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<script>
	$(function(){
		var description;//备注
		var userId="0"//用户id
		var dateId;
		var userIndex;
		$.ajax({
			url : './../../login/getUser',
			type:'POST',
			dataType:'json',
			success : function(result) {// 成功时的回调函数
				if(result.code == 1){
					$(".input .record").val(result.userName);
					userIndex=result.data.userId;
					$("#userList>li").eq(userIndex-1).addClass("active");
				}else{
					showMaskEditCom({text: "用户未登录,将在2s之后跳转登录界面",duration: 1500});
					setTimeout(function(){
						window.location.href="./../login.html";
					},2000)
					return false;

				}
			}
		});
		getlist();
		function getlist(type){
			$.ajax({
				url : './../../bill/getCoderdDetail',
				type:'GET',
				data:{
					userId:type,
				},
				dataType:'json',
				success : function(result) {// 成功时的回调函数
					if (result.code==1) {
						for (var i in result.data.recoedDetail) {
							var date=result.data.recoedDetail[i]
							$("#detaiList").append('<tr> <td>'+date.recordDate+'</td> <td>'+date.billType+'</td> <td>'+date.avgUser+'.</td> <td>'+date.description+'</td> <td>'+date.totalMoney+'</td> <td>'+date.payUser+'</td> </tr>');
						}
						$(".credits>i").text(result.data.totalMoney);
					}
				}
			});
		}
		$.ajax({
			url : './../../common/getCode',
			type:'GET',
			data:{
				codeType:"USER",
			},
			dataType:'json',
			success : function(result) {// 成功时的回调函数
				for (var i in result) {
					$("#userList").append('<li  data-id="' + result[i].code + '"><a>' + result[i].name + '</a> </li>');
				}
				$("#userList>li").eq(userIndex-1).addClass("active");
				$("#userList>li").on("click",function(){
					var index=$(this).attr("data-id");
					$(this).addClass("active").siblings().removeClass("active");
					$("#detaiList").html('<tr class="header"> <td>日期</td> <td>用途</td> <td>消费人</td><td>备注</td> <td>金额</td> <td>付款人</td> </tr>');
					getlist(index);
				})
			}
		});

		$(".user_footer>ul>li").eq(0).find("a").addClass("active");
		$(".user_footer>ul>li").on("click",function(){
			var index=$(this).index();
			if(index==1){
				window.location.href="total.html";
			}
		})

	});
</script>
</body>
</html>
